<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

	<title>UI</title>
    <link rel="apple-touch-icon" href="space_icon.png"/>
    <link rel="apple-touch-startup-image" href="space_splash.png" />
	<link rel="stylesheet" href="/jquery/jquery.mobile-1.1.0.css" />

	<script src="/jquery/jquery-1.7.2.js"></script>
	<script src="/jquery/jquery.mobile-1.1.0.js"></script>

<style>

body {
	margin: 0px;
}

#a, #b, #c, #d, #e, #f, #g, #h {
	position: fixed;
	width: 80px;
	height: 80px;
	background-color: red;
	text-align: center;
	line-height: 80px;
}

@media screen and (orientation: portrait) {
#a, #b, #c, #d, #e, #f, #g, #h {
	width: 80px;
	height: 70px;
	line-height: 70px;
}
#a, #b, #c, #d {
	top: 0px;
}
#e, #f, #g, #h {
	bottom: 0px;
}
#a, #e {
	left: 0px;
}
#b, #f {
	left: 80px;
}
#c, #g {
	right: 80px;
}
#d, #h {
	right: 0px;
}
}

@media screen and (orientation: landscape) {
#a, #b, #c, #d, #e, #f, #g, #h {
	width: 80px;
	height: 75px;
	line-height: 75px;
}
#a, #b, #c, #d {
	left: 0px;
}
#e, #f, #g, #h {
	right: 0px;
}
#a, #e {
	bottom: 0px;
}
#b, #f {
	bottom: 75px;
}
#c, #g {
	top: 75px;
}
#d, #h {
	top: 0px;
}
}

</style>
</head> 
<body> 

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>
<div id="e">E</div>
<div id="f">F</div>
<div id="g">G</div>
<div id="h">H</div>

</body>
</html>
